<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>优先级&继承</title>
</head>
<style>
    /* 
    当属性设置冲突时
      1、当选择器的优先级相同的时候,后面的覆盖前面的
      2、当选择器的优先级不同的时候，优先级大的生效
     */

     /* 
      1、!important，加在样式属性值后，权重值为 10000
      2、内联样式，如：style=””，权重值为1000
      3、ID选择器，如：#content，权重值为100
      4、类，伪类和属性选择器，如： .content、:hover、 [for] 权重值为10
      5、标签选择器和伪元素选择器，如：div、p、::before 权重值为1
      6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
      */

      /* 警告：在进行计算时不允许进行进位，例如，20个类选择器仅仅意味着20个十位，而不能视为两个百位，也就是说，无论多少个类选择器的权重叠加，都不会超过一个ID选择器。 */

  .red{
    color: yellow;
  }

  h1{
    color: aquamarine;
    font-size: 50px;
  }

  h1{
    color: blueviolet;
  }


/* 继承
      某些属性的默认值会继承父元素的值
      文字相关的大多数都会继承
      宽高之类的效果比较明显的，影响大的属性不会继承
    */
  
    #div1{
      color: blue;
      border: 1px solid #000;
    }

    p{
      border: 1px solid #000;

      /* 设置为浏览器的默认值，不受继承的影响 */
      color: initial;
      /* 不管这个属性默认是不是继承的，都继承 */
      color: inherit;
      /* 没设置，无人干预 */
      color: unset;
    }




</style>
<body>
  <h1 style="color: yellow" class="red">唯创大法好</h1>
  <div id="div1">
    div1div1div1div1
    <p>pppppppppppppppppppp</p>
  </div>
</body>
</html>